<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>负载均衡解析</title>
    <#include "/header.html">

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>

</head>
<body>
<style>
    .bootstrap-select{
        width: 100% !important;
    }
</style>
<div class="layui-container " style="width: 100%;">

    <div class="layui-row" style="margin-top: 10px;">
        <div class="layui-col-md2 ">
            <select class="selectpicker" id="platformId" title="请选择平台"  style="width:100%;" >
                <option value="">全部平台</option>
            </select>
        </div>
        <div class="layui-col-md2 " style="padding-left: 20px;">
            <input type="text" id="address"  required  placeholder="服务器地址" autocomplete="off" class="form-control">
        </div>
        <div class="layui-col-md2 " style="padding-left: 20px;">
            <select class="selectpicker" id="addressType" title="请选择网络类型"  style="width:100%;" >
                <option value="">全部</option>
                <option value="intranet">内网</option>
                <option value="internet">外网</option>
            </select>
        </div>
        <div class="layui-col-md2 " style="padding-left: 20px;">
            <input type="text" class="layui-input" id="time" placeholder="选择注册时间">
        </div>
        <div class="layui-col-md3 " style="padding-left: 20px;">
            <a class="btn btn-default" id="search">查询</a>

        </div>
    </div>

    <div class="layui-row table-striped" style="margin-top: 10px;padding:0 0px;">
        <table id="bootstrap-table" data-mobile-responsive="true"></table>
    </div>

</div>



<script>
    $(function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#time', //指定元素
            range: true,
            position: 'fixed'
        });
        init();
        $('#search').click(function(){
            $('#bootstrap-table').bootstrapTable('refresh');
        })
    });

    //初始化
    function init(){
        $.ajax({
            type: "get",
            url: baseURL + "platform/findAllPlatform",
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    var _html = '<option value="">全部平台</option>'
                    for (var i = 0; i < data.platformList.length; i++) {
                        _html = _html + '<option value="' + data.platformList[i].platformId + '">' + data.platformList[i].platformName + '</option>'
                    }
                    $('#platformId').html(_html);
                    $('#platformId').selectpicker('refresh');
                }
            }
        })
        $('#bootstrap-table')
            .bootstrapTable(
                {
                    method : 'post', // 服务器数据的请求方式 get or post
                    url : baseURL + 'aliyunSlb/findAliyunSlbPage', // 服务器数据的加载地址
                    showRefresh : true,
                    showToggle : true,
                    showColumns : true,
                    showExport :true,
                    sortable: true,
                    sortName:"userId",// 排序列名称
                    sortOrder: "desc",
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"
                    queryParams : function(params) {

                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit+'',
                            page : (params.offset/params.limit)+1+'',
                            platformId:$('#platformId').val()?$('#platformId').val():null,
                            addressType:$('#addressType').val(),
                            address:$('#address').val(),
                            beginDate:$('#time').val().split(' - ')[0]?$('#time').val().split(' - ')[0]:'',
                            endDate:$('#time').val().split(' - ')[1]?$('#time').val().split(' - ')[1]:''
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        // {
                        //     checkbox : true
                        // },
                        {
                            field : 'loadBalancerIdStr', // 列字段名
                            title : '负载均衡器实例ID', // 列标题
                            align : 'center'
                        },
                        {
                            field : 'loadBalancerName', // 列字段名
                            title : '名称', // 列标题
                            align : 'center'
                        },
                        {
                            field : 'slbDescribeRegions',
                            title : '可用区',
                            align : 'center',
                            formatter : function(value, row,index) {
                                var _value = '';
                                value.forEach(function(item,index){
                                    _value = _value + item.localName +' '+ item.regionEndpoint
                                })
                                return _value
                            }
                        },
                        {
                            field : 'address',
                            title : '服务器地址',
                            align : 'center'
                        },
                        {
                            field : 'loadBalancerStatus',
                            title : '状态',
                            align : 'center',
                            formatter : function(value, row,index) {
                                var _data ={
                                    inactive: '不会再转发流量。',
                                    active: '默认状态',
                                    locked: '被锁定。',
                                }
                                return _data[value];

                            }
                        },
                        {
                            field : 'addressType',
                            title : '网络类型',
                            align : 'center',
                            formatter : function(value, row,index) {
                                var _data ={
                                    intranet : '内网。',
                                    internet: '外网'
                                }
                                return _data[value];

                            }
                        },
                        {
                            field : 'healthCheckConnectPort',
                            title : '端口',
                            align : 'center'

                        },
                        {
                            field : 'healthCheck',
                            title : '健康检查',
                            align : 'center',
                            formatter : function(value, row,index) {
                                var _data ={
                                    on : '开启',
                                    off: '关闭'
                                }
                                return _data[value];

                            }

                        },
                        {
                            field : 'backendServerPort',
                            title : '后端服务器',
                            align : 'center'

                        },
                        {
                            field : 'LoadBalancerSpec',
                            title : '实例规格',
                            align : 'center'
                        },
                        {
                            field : 'internetChargeType',
                            title : '带宽计费方式',
                            align : 'center',
                            formatter : function(value, row,index) {
                                var _data ={
                                    paybybandwidth : '按带宽计费',
                                    paybytraffic: '按流量计费'
                                }
                                return _data[value];

                            }
                        },
                        {
                            field : 'createTime',
                            title : '注册时间',
                            align : 'center'
                        },
                        {
                            field : 'payType',
                            title : '付费方式(全部)',
                            align : 'center',
                            formatter : function(value, row,index) {
                                var _data ={
                                    PayOnDemand : '按量付费',
                                    PrePay: '预付费'
                                }
                                return _data[value];

                            }
                        },
                        {
                            title : '操作',
                            field : 'id',
                            align : 'center',
                            formatter : function(value, row,index) {
                                var e = '<a style="margin-right: 10px;" class="btn btn-primary btn-sm " href="loadBalanceMonitor.html?id='+row.id+'">监听</a>';
                                var d = '<a style="margin-right: 10px;"  class="btn btn-warning btn-sm" href="loadBalanceServer.html?id='+row.id+'">服务器</a>';
                                var c = '<a class="btn btn-info btn-sm" href="loadBalanceRecord.html?id='+row.loadBalancerIdStr+'">更换纪录</a>';

                                return '<div style="white-space: nowrap">'+e +d+c+'</div>';

                            }
                        } ]
                });
    }
</script>
</body>
</html>